<template>
	<div class="city">
		<city-header></city-header>
		<search-city :citys="citys"></search-city>
		<hold-city :list="listCity"></hold-city>
		<!-- <alphabetical @change="handleLetterChange" :list="citysKey"></alphabetical> -->
		<list-city :list="citys" :letter="letter"></list-city>
		<city-alphabet :cities="citysKey" @change="handleLetterChange"></city-alphabet>

	</div>
</template>

<script>
	import cityHeader from './components/Header.vue'
	import holdCity from './components/HoldCity.vue'
	import searchCity from './components/searchCity.vue'
	import Alphabetical from './components/Alphabetical.vue'
	import listCity from './components/listCity.vue'
	import CityAlphabet from './components/AlphabetTwo.vue'
	import axios from 'axios'
	import request from '../../unit/request.js'
	// import Bscroll from 'better-scroll'

	export default{
		name:'City',
		components:{
			cityHeader,
			holdCity,
			searchCity,
			Alphabetical,
			listCity,
			CityAlphabet
		},
		data(){
			return {
				listCity:{},
				citysKey:[],
				citys:{},
				letter:''
			}
		},
		methods:{
			getInfo(){
				request({
					url:'/static/mock/city.json',
					method:'get',
				}).then(this.getinfoList)
				// axios.get('/static/mock/city.json').then(this.getinfoList)
			},
			getinfoList(res){
				var res=res.data
				if (res.ret && res.data) {
					this.listCity=res.data;
					this.citysKey=Object.keys(res.data.cities);
					this.citys=res.data.cities;
				}
			},
			handleLetterChange(letter){
				this.letter=letter
			}
		},
		mounted(){
			// this.scroll=new Bscroll(this.$refs.wrapper);
			this.getInfo();
		}
	}
</script>

<style lang="stylus">
	.cityScroll
		position:absolute
		overflow:hidden
		top:1.6rem
		left:0
		right:0
		bottom:0
</style>